{"componentChunkName":"component---src-templates-docs-js","path":"/docs/profiler.html","result":{"data":{"markdownRemark":{"html":"

Profiler измеряет то, как часто рендерится React-приложение и какова «стоимость» этого.\nЕго задача — помочь найти медленные части приложения, которые можно оптимизировать (например, через мемоизацию).

\n

\n
Примечание:
\n
Профилирование добавляет накладные расходы, поэтому оно отключено в продакшен-режиме.
\n
Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профилированием.\nПодробнее об использовании данной сборки можно узнать на fb.me/react-profiling.
\n

\n

Использование

\n

Profiler может быть добавлен в любую часть React-дерева для измерения стоимости рендеринга этой части.\nОн принимает два пропа: id (string) и колбэк onRender (function), который React вызывает каждый раз, когда компонент внутри дерева «фиксирует» обновление.

\n

Например, так выглядит процесс профилирования компонента Navigation и его дочерних компонентов:

\n

render(\n  <App>\n    <Profiler id=\"Navigation\" onRender={callback}>      <Navigation {...props} />\n    </Profiler>\n    <Main {...props} />\n  </App>\n);

\n

Для замера разных частей приложения могут быть использованы несколько компонентов Profiler:

\n

render(\n  <App>\n    <Profiler id=\"Navigation\" onRender={callback}>      <Navigation {...props} />\n    </Profiler>\n    <Profiler id=\"Main\" onRender={callback}>      <Main {...props} />\n    </Profiler>\n  </App>\n);

\n

Также Profiler может быть вложенным с целью замера разных компонентов внутри поддерева:

\n

render(\n  <App>\n    <Profiler id=\"Panel\" onRender={callback}>      <Panel {...props}>\n        <Profiler id=\"Content\" onRender={callback}>          <Content {...props} />\n        </Profiler>\n        <Profiler id=\"PreviewPane\" onRender={callback}>          <PreviewPane {...props} />\n        </Profiler>\n      </Panel>\n    </Profiler>\n  </App>\n);

\n

\n
Примечание:
\n
Несмотря на то, что компонент Profiler достаточно легковесный, его следует использовать только при необходимости; каждое его использование увеличивает нагрузку на CPU и память.
\n

\n

Колбэк `onRender`

\n

Profiler принимает функцию onRender в качестве пропа.\nReact вызывает эту функцию каждый раз, когда компонент внутри профилируемого дерева «фиксирует» изменение.\nЭта функция принимает параметры, которые описывают, что было отрендерено и сколько времени это заняло.

\n

function onRenderCallback(\n  id, // проп \"id\" из дерева компонента Profiler, для которого было зафиксировано изменение\n  phase, // либо \"mount\" (если дерево было смонтировано), либо \"update\" (если дерево было повторно отрендерено)\n  actualDuration, // время, затраченное на рендер зафиксированного обновления\n  baseDuration, // предполагаемое время рендера всего поддерева без кеширования\n  startTime, // когда React начал рендерить это обновление\n  commitTime, // когда React зафиксировал это обновление\n  interactions // Множество «взаимодействий» для данного обновления \n) {\n  // Обработка или логирование результатов...\n}

\n

Давайте поближе рассмотрим каждый из пропсов:

\n

id: string —\nПроп id из дерева компонента Profiler, для которого было зафиксировано изменение.\nМожет использоваться для определения той части дерева, которое было зафиксировано, если вы используете несколько профилировщиков.
phase: \"mount\" | \"update\" —\nПоказывает, было ли дерево только что смонтировано в первый раз или повторно отрендерено в результате изменения пропсов, состояния или хуков.
actualDuration: number —\nВремя, затраченное на рендеринг компонента Profiler и его дочерних компонентов для текущего обновления.\nПоказывает насколько хорошо поддерево использует мемоизацию (например, React.memo, useMemo, shouldComponentUpdate).\nВ идеальном случае это значение должно существенно снизиться после монтирования, так как многим из дочерних компонентов нужно будет перерендериваться только в случае, если изменяются их специфичные пропсы.
baseDuration: number —\nДлительность самого последнего рендеринга для каждого отдельного компонента внутри дерева компонента Profiler.\nЭто значение оценивает стоимость рендера в наихудшем случае (например, изначальное монтирование или дерево без мемоизации).
startTime: number —\nВременная метка, когда React начал рендерить текущее обновление.
commitTime: number —\nВременная метка, когда React зафиксировал текущее обновление.\nЭто значение доступно для всех профилировщиков при фиксации, позволяя группировать их, если в этом есть необходимость.
interactions: Set —\nМножество «взаимодействий», которые были зафиксированы во время подготовки изменения (например, когда render или setState были вызваны).

\n

\n
Примечание:
\n
Взаимодействия могут быть использованы для установки причины обновления, хотя API для их отслеживания все еще экспериментальное.
\n
Вы можете узнать подробнее на fb.me/react-interaction-tracing.
\n

","frontmatter":{"title":"API для работы с Profiler","next":null,"prev":null},"fields":{"path":"content\\docs\\reference-profiler.md","slug":"docs/profiler.html"}}},"pageContext":{"slug":"docs/profiler.html"}},"staticQueryHashes":[]}